<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>MOON</title>
<link rel="stylesheet" th:href="@{/moon/css/bootstrap.css}" />
<link rel="stylesheet" th:href="@{/icon/css/font-awesome.min.css}" />
</head>
<body class="bg-c">
	<div class="container-fluid" id="app">
		<div class="row">
			<div class="col text-center bg-success text-white shadow">增删改查</div>
		</div>
		<br>
		<div class="row">
			<button class="btn btn-sm btn-outline-info ml-2" onclick="showCity();">查询</button>
		</div>
		<br>
		<div class="row">
			<button class="btn btn-sm btn-outline-info ml-2" onclick="showStudent();">查询学生</button>
		</div>
		<hr>
		<div class="form-inline mt-2">
			<span>院系</span><input id="dept" type="text" class="form-control form-control-sm ml-1"/>
			<span class="ml-1">性别</span><input id="sex" type="text" class="form-control form-control-sm ml-1"/>
			<button class="btn btn-sm btn-outline-success ml-2" @click="showdata();">查询</button>
		</div>
		<div class="mt-2">
			<table class="table">
				<tr v-for="s in studentdata">
					<td>{{s.id}}</td>
					<td>{{s.name}}</td>
					<td>{{s.sex}}</td>
					<td>{{s.birth|filterDate}}</td>
					<td>{{s.department}}</td>
					<td>{{s.address}}</td>
					<td>{{s.state|filterState}}</td>
					<td>
						<button class="btn btn-sm btn-outline-warning" @click="del(s.id);">删除</button>
					</td>
				</tr>
			</table>
		</div>
	</div>

	<!-- js -->
	<script th:src="@{/moon/js/jquery.js}"></script>
	<script th:src="@{/moon/js/vue.js}"></script>
	<script th:src="@{/layer/layer.js}"></script>
	<script th:src="@{/moon/js/jquery.time.js}"></script>
	<script th:inline="javascript">
		//
		function showCity(){
			$.post("/moon/China/showCity",function (data) {
				console.log(data);
			})
		}

		function showStudent(){
			$.post("/moon/Student/selectByJpa",function (data) {
				console.log(data);
			})
		}
		//app
		var app = new Vue({
			el: "#app",
			data: {studentdata: []},
			methods: {
				showdata: function () {
					$.post("/moon/Student/selectByDeptAndSex", {
						dept: $("#dept").val(),
						sex: $("#sex").val()
					}, function (data) {
						app.studentdata = data;
					});
				},
				del: function (id) {
					layer.confirm("真的要删除吗?", function () {
						$.post("/moon/Student/deleteById", {id: id}, function (data) {
							layer.msg("操作成功");
							//回显
							app.showdata();
						});
					});
				}
			},
			filters: {
				filterState: function (oldval) {
					if (oldval == "0") {
						return "劝退";
					} else if (oldval == "1") {
						return "常规";
					} else if (oldval == "2") {
						return "降级";
					}
				},
				filterDate: function (oldval) {
					return $.msfmt.todate(oldval, false, 8);
				}
			}
		});
	</script>
</body>
</html>